<template>
  <UserCardList :user-list="userList"/>
  <div>
    <van-empty v-if="!userList || userList.length < 1" description="暂无相关用户"/>
  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs'
import UserCardList from "../components/UserCardList.vue";

const route = useRoute()

const {tags} = route.query

const userList = ref([])

onMounted(async () => {
  try {
    const response = await myAxios.get('/user/search/tags', {
      params: {
        tagNameList: tags
      },
      paramsSerializer: params => {
        return qs.stringify(params, {
          indices: false
        });
      }
    });

    console.log('/user/search/tags succeed', response);
    const userListData = response.data?.data || [];
    userListData.forEach(user => {
      user.tags = JSON.parse(user.tags);
    });
    userList.value = userListData;
    console.log('userList', userList.value);
  } catch (error) {
    console.log('/user/search/tags error', error)
  }
});

</script>


<style scoped>

</style>
